/**
 * vue-server-renderer:  渲染实例
 * data-server-rendered="true"客户端渲染激活接管的一个入口
 * 
 */

const express = require("express")
const server = express()
const fs = require("fs")
const { createBundleRenderer } = require('vue-server-renderer')
const isProd = process.env.NODE_ENV === 'production'
const setupDevServer = require("./build/setup-dev-server")

// const renderer = require("vue-server-renderer").createRenderer({
//   template: fs.readFileSync("./index.html", 'utf-8')  //通过模板渲染vue实例
// })  //渲染器，渲染实例



//express.static处理磁盘上的文件，而开发环境下读取的是内存的，所以要配置setup-dev-server.js的TODO
server.use("/dist", express.static("./dist"))  //将dsit文件开放出来


let renderer = null;

let onReady = null;   //返回的promise

if(isProd) {
  const serverBundle = require("./dist/vue-ssr-server-bundle.json")
  const clientManifest = require("./dist/vue-ssr-client-manifest.json")
  const template = fs.readFileSync("./index.html", 'utf-8')  //通过模板渲染vue实例
  renderer = createBundleRenderer(serverBundle, {
    template,
    clientManifest // （可选）客户端构建 manifest
  })  //渲染器，渲染实例
}else {
  //开发模式 -> 监视打包构建 -> 重新生成renderer渲染器
  onReady = setupDevServer(server, (serverBundle, template, clientManifest) => {
    renderer = createBundleRenderer(serverBundle, {
      template,
      clientManifest // （可选）客户端构建 manifest
    })  //渲染器，渲染实例
  })
}

let render = (req, res) => {
  // const vm = new Vue({
  //   template: `<div>
  //                 <h1>{{ message }}</h1>
  //             </div>`,
  //   data: {
  //     message: '妖二灵'
  //   }
    
  // })
  
  
  //arg2: 可以在html文件中使用定义的数据，
  renderer.renderToString({
    title: "妖二灵",
    meta: '<meta name="description" content="vue-ssr">',  //html模板使用时，要3个花括号，这样不会被vue识别渲染成字符串
    url: req.url
  }, (err, html) => {
    if(err) return res.status(500).end('服务器内部错误')
    
    res.setHeader('Content-Type', 'text/html;charset=utf8')  //设置响应头，内容类型utf8
    res.end(html)
    //<div data-server-rendered="true"><h1>妖二灵</h1></div>
  })
}

server.get('*', isProd ? render : async (req, res) => {
  //开发环境时，有了renderer在进行打包构建
  await onReady
  render(req, res)
})


server.listen(3000, () => {
  console.log('port: 3000');
})